<template>
    <div>
        <div style="margin:20px">
            <a-row type="flex">
                <a-col style="margin-top: 5px;font-size: 16px" :order="7">
                    <span>活动列表：</span>
                </a-col>
                <a-col :span="4" :order="8">
                    <a-select v-model="searchMap.activityId" style="width: 150px" default-value="-1"
                              @change="searchAcChange">
                        <a-select-option v-for="ac in activityData" :value="ac.id">{{ac.name}}</a-select-option>
                    </a-select>
                </a-col>
                <a-col style="margin-top: 5px;font-size: 16px" :order="3">
                    <span>状态：</span>
                </a-col>
                <a-col :span="4" :order="4">
                    <a-select v-model="searchMap.status" style="width: 150px" default-value="-1"
                              @change="searchStatusChange">
                        <a-select-option selected value=-1>全部</a-select-option>
                        <a-select-option value=1>通过</a-select-option>
                        <a-select-option value=2>驳回</a-select-option>
                        <a-select-option value=3>未审核</a-select-option>
                        <a-select-option value=4>转人工中</a-select-option>
                    </a-select>
                </a-col>
                <a-col style="margin-top: 5px;font-size: 16px" :order="5">
                    <span>撤回状态：</span>
                </a-col>
                <a-col :span="4" :order="6">
                    <a-select v-model="searchMap.cancel" style="width: 150px" default-value="-1"
                              @change="searchCancelChange">
                        <a-select-option selected value=-1>全部</a-select-option>
                        <a-select-option value=1>已撤回</a-select-option>
                        <a-select-option value=0>未撤回</a-select-option>
                    </a-select>
                </a-col>
                <a-col style="margin-top: 5px;font-size: 16px" :order="1">
                    <span>商品编号：</span>
                </a-col>
                <a-col :span="4" :order="2">
                    <a-input-search allowClear v-model="searchMap.goodsId" allow-clear placeholder="商品编号"
                                    style="margin-bottom:20px;width: 160px" @search="loadData"
                    />
                </a-col>
                <a-col style="margin-top: 5px;font-size: 16px" :order="9">
                    <span>排期开始时间(起)：</span>
                </a-col>
                <a-col :span="10" :order="10">
                    <a-date-picker
                            v-model="searchMap.scStartTime"
                            show-time
                            format="YYYY-MM-DD HH:mm:ss"
                            placeholder="请选择时间范围起始"
                            @change="fromTimeChange"
                    />
                    ——
                    <a-date-picker
                            v-model="searchMap.scEndTime"
                            show-time
                            format="YYYY-MM-DD HH:mm:ss"
                            placeholder="请选择时间范围起始"
                            @change="toTimeChange"
                    />
                </a-col>

            </a-row>
        </div>

        <a-table
                rowKey="id"
                :pagination="false"
                size="middle" :columns="columns" :data-source="tableData" :scroll="{ x: 800, y: 500 }">

            <a-table
                    rowKey="id"
                    align="center"
                    size="small"
                    slot="expandedRowRender"
                    slot-scope="record"
                    :columns="innerColumns"
                    :data-source="record.skuList"
                    :pagination="false"
            >
                <div slot="pic" slot-scope="text">
                    <img style="width: 70px;height: 70px" :src="text">
                </div>
            </a-table>


            <div slot="checkType" slot-scope="text, record">
                <a-tag :color="record.checkType===1?'green':''">
                    {{record.checkType===1?'系统审核':record.checkType===2?'人工审核':'---'}}
                </a-tag>
            </div>
            <div slot="reply" slot-scope="text, record">
                <!--                解决\n不换行问题-->
                <div style=" white-space: pre-line">
                    {{record.reply}}
                </div>
            </div>
            <div slot="cancel" slot-scope="text, record">
                <a-tag :color="record.cancel===1?'':'green'">
                    {{record.cancel===1?'已撤回':'---'}}
                </a-tag>
            </div>
            <div slot="status" slot-scope="text, record">
                <a-tag :color="record.status===1?'green':record.status===2?'red':record.status===4?'blue':''">
                    {{record.status===1?'通过':record.status===2?'驳回':record.status===3?'未审核':record.status===4?'转人工中...':'异常'}}
                </a-tag>
            </div>

            <div slot="discount" slot-scope="text, record">
                {{record.discount+'折'}}
            </div>
            <div slot="startTime" slot-scope="text, record">
                <span>    {{moment(record.scStartTime).format("YYYY-MM-DD HH:mm")}}</span>
            </div>
            <div slot="endTime" slot-scope="text, record">
                <span>    {{moment(record.scEndTime).format("YYYY-MM-DD HH:mm")}}</span>
            </div>
            <div slot="createTime" slot-scope="text, record">
                <span>    {{moment(record.createTime).format("YYYY-MM-DD HH:mm")}}</span>
            </div>


            <div slot="action" slot-scope="text,record">

                <a-popconfirm
                        style="margin-left: 10px"
                        v-if="record.status===3 && record.cancel===0"
                        title="确定撤回该申请吗?"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="cancelApply(record.id)"
                >
                    <a-button type="danger" size="small">撤回</a-button>
                </a-popconfirm>
                <!--                <a v-if="record.enabled===0" @click="updateEnabled(record,1)">开启</a>-->
            </div>

        </a-table>
        <a-pagination
                style="margin: 20px;float: right"
                v-model="pageMap.current"
                :page-size-options="pageSizeOptions"
                :total="pageMap.total"
                show-size-changer
                :page-size="pageMap.pageSize"
                @change="pageChange"
                @showSizeChange="onShowSizeChange"
        >
            <template slot="buildOptionText" slot-scope="props">
                <span>{{ props.value }}条/页</span>
            </template>
        </a-pagination>
    </div>
</template>

<script>

    import killApplyApi from "../../../api/remarketing/killApplyApi";
    import activityApi from "../../../api/remarketing/activityApi";
    import moment from 'moment-timezone'

    const columns = [
        {title: '申请编号', dataIndex: 'id', key: 'id', width: 150, ellipsis: true},
        {title: '活动名', width: 130, dataIndex: 'activityName', key: ''},
        {title: '商品编号', width: 150, dataIndex: 'goodsId', key: '', ellipsis: true},
        {title: '销量', width: 70, dataIndex: 'sellCount', key: ''},
        {title: '折扣', dataIndex: 'discount', width: 60, key: '', scopedSlots: {customRender: "discount"}},
        {title: '审核状态', dataIndex: 'status', width: 120, key: '', scopedSlots: {customRender: "status"}},
        {title: '撤回状态', dataIndex: 'cancel', width: 120, key: '', scopedSlots: {customRender: "cancel"}},
        {title: '审核方式', dataIndex: 'checkType', width: 120, key: '', scopedSlots: {customRender: "checkType"}},

        {title: '审核意见', width: 250, dataIndex: 'reply', key: '', scopedSlots: {customRender: "reply"}},
        {title: '活动开始时间', dataIndex: 'scStartTime', key: '', width: 180, scopedSlots: {customRender: "startTime"}},
        {title: '活动结束时间', dataIndex: 'scEndTime', key: '', width: 180, scopedSlots: {customRender: "endTime"}},
        {title: '创建时间', dataIndex: 'createTime', key: '', width: 180, scopedSlots: {customRender: "createTime"}}
    ];
    const innerColumns = [
        {title: '商品编号', dataIndex: 'id', key: 'id', width: 70, ellipsis: true},
        {title: '宝贝名', width: 130, dataIndex: 'name', key: '', ellipsis: true},
        {title: '图片', width: 80, dataIndex: 'pic', key: '', scopedSlots: {customRender: "pic"}},
        {title: '库存', width: 70, dataIndex: 'stock', key: ''},

    ];
    export default {
        name: "myApply",
        data() {
            return {
                searchForm: this.$form.createForm(this, {name: 'advanced_search'}),
                //搜索
                searchMap: {
                    goodsId: undefined,
                    activityId: undefined,
                    scStartTime: null,
                    scEndTime: null,
                    status: "-1",
                    cancel: "-1",
                    shop: true
                },
                //表格
                columns,
                innerColumns,
                tableData: [],
                activityData: [],
                //分页
                pageSizeOptions: ['10', '20', '30', '50', '100'],
                pageMap: {
                    current: 1,
                    pageSize: 10,
                    total: 0
                },

            }
        },
        created() {
            this.loadData();
            this.loadActivityList()
        },
        methods: {
            moment,
            loadData() {
                killApplyApi.query(this.searchMap, this.pageMap.current, this.pageMap.pageSize).then(resp => {
                    if (resp.data.flag) {
                        let tableData = resp.data.data.rows;
                        console.log(tableData)
                        if (tableData) {
                            tableData.forEach(item => {
                                try {
                                    item.skuList = item.params ? JSON.parse(item.params) : []
                                } catch (e) {
                                    console.log(e.toString())
                                }
                            })
                        }
                        console.log(tableData)

                        this.tableData = tableData;
                        this.pageMap.total = resp.data.data.total;
                    }
                })
            },
            /**
             * 每页大小改变的回调
             * */
            onShowSizeChange(current, pageSize) {
                this.pageMap.current = current;
                this.pageMap.pageSize = pageSize;
                this.loadData();
            },
            pageChange(value) {
                this.pageMap.current = value;
                this.loadData()
            },
            /**
             * 加载全部活动的列表
             */
            loadActivityList() {
                activityApi.list().then(resp => {
                    if (resp.data.flag) {
                        this.activityData = resp.data.data
                    }
                })
            },


            /**
             * 撤回申请
             * @param id
             */
            cancelApply(id) {
                console.log(id)
                killApplyApi.cancel(id).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message)
                        this.loadData()

                    }
                })
            },
            searchAcChange(value) {
                this.searchMap.activityId = value;
                this.loadData()
            },
            searchStatusChange(value) {
                this.searchMap.status = value;
                this.loadData()
            },
            searchCancelChange(value) {
                this.searchMap.cancel = value;
                this.loadData()
            },
            fromTimeChange(value) {
                this.searchMap.scStartTime = value ? value.format("YYYY-MM-DD HH:mm:ss") : null
                this.loadData()
            },
            toTimeChange(value) {
                this.searchMap.scStartTime = value ? value.format("YYYY-MM-DD HH:mm:ss") : null
                this.loadData()
            },
        }
    }
</script>

<style scoped>

</style>